<template>
    <input :type="type" :value="value" :maxlength="maxlength" :placeholder="placeholder" @click="$emit('click', $event.target)" @change="$emit('input', $event.target.value)">
</template>

<script>
    export default {
        name: 'mt-input',
        props: {
            value: {
                type: String,
                default: ''
            },
            type: {
                type: String,
                default: 'text'
            },
            placeholder: {
                type: String,
                default: ''
            },
            maxlength: {
                type: Number,
                default: Infinity
            }
        }
    }
</script>

<style scoped lang="scss">
    input {
        width: 100%;
        border: none;
        background-color: #fff;
        background-image: none;
        box-sizing: border-box;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: none;
        padding: 0 15px;
        -webkit-appearance: none;

        &::-webkit-input-placeholder{
            color:#ccc;
        }

    }
</style>